<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" @on-close="onDialogClose" @on-confirm="onSubmit">
        <template #content>
            <el-tree ref="treeRef" style="max-width: 600px" :data="menuTreeAssignVo?.menuList" show-checkbox
                node-key="menuId" default-expand-all :default-checked-keys="menuTreeAssignVo?.checkedList" :props="{
                    children: 'children',
                    label: 'title',
                }">
                <template #default="{ node, data }">
                    <div class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <div>
                            <el-button @click="onJump(data.path)" type="primary" link v-if="data.path" >
                                跳转 
                            </el-button> 
                        </div>
                    </div>
                </template>
            </el-tree>
        </template>
    </SysDialog>
</template>

<script setup lang="ts">
import SysDialog from '../../../components/SysDialog.vue'
import useDialog from '../../../hooks/useDialog'
import { MenuApi } from '../../../api/menu'
import { reactive, ref } from 'vue'
import { useUserStore } from '../../../store/user'
import { RoleApi } from '../../../api/role'
import { ElMessage } from 'element-plus'
import { ElTree } from 'element-plus'
import { useRouter } from 'vue-router'

const treeRef = ref<InstanceType<typeof ElTree>>()
const menuTreeAssignVo = ref({
    menuList: [],
    checkedList: []
})
const { dialog, onDialogClose, onDialogShow } = useDialog()

const assignMenuReq = reactive({
    roleId: '',
    menuList: [] as string[]
})
const onSubmit = async () => {
    const menuIds = treeRef.value?.getCheckedKeys() as string[]
    assignMenuReq.menuList = menuIds.concat(treeRef.value?.getHalfCheckedKeys() as string[])
    if (!assignMenuReq.menuList || assignMenuReq.menuList.length < 1) {
        ElMessage.warning('至少要为角色分配1个菜单哦')
        return
    }

    const res = await RoleApi.assignMenu(assignMenuReq.roleId, assignMenuReq.menuList)
    if (res && res.code === 200) {
        ElMessage.success(res.msg)
        onDialogClose()
    }
}

const checked = (menuId: number, menuList: any, newArr: any) => {
    menuList.forEach((item: any) => {
        if (item.menuId == menuId) {
            if (item.children && item.children.length == 0) {
                newArr.push(item.menuId);
            }
        } else {
            if (item.children && item.children.length > 0) {
                // 递归调用
                checked(menuId, item.children, newArr)
            }
        }
    })
}

const router = useRouter()
const onJump = (path: string) => {
router.push(path)
}

const userStore = useUserStore()
const showMenuTreeDialog = async (roleName: string, roleId: string | number) => {
    assignMenuReq.roleId = roleId + ''
    dialog.title = `给【${roleName}角色】分配菜单`
    const res = await MenuApi.listTreeMenuByUserIdAndRoleId((userStore.getUserId || 0), roleId)
    if (res && res.code === 200 && res.data) {
        menuTreeAssignVo.value.menuList = res.data.menuList
        menuTreeAssignVo.value.checkedList = res.data.checkedList
    }

    // 更新当前角色拥有的权限ID
    if (menuTreeAssignVo.value.checkedList.length > 0) {
        let newArr: any = []
        menuTreeAssignVo.value.checkedList.forEach((menuId) => {
            checked(menuId, menuTreeAssignVo.value.menuList, newArr)
        })
        menuTreeAssignVo.value.checkedList = newArr
    }

    onDialogShow()
}
defineExpose({
    showMenuTreeDialog
})


</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>